<template>
    <div class="clientpond">
        <!-- 面包屑导航 -->
        <div class="page_top">
            <div class="left_btn" @click="back">
                <img src="../../../assets/image/back.png" alt="" />
            </div>
            <crumbs basetitle="微提醒" title="报案处理"></crumbs>
        </div>
        <div class="paddingbox">
            <div class="formbox">
                <div class="top">
                    <div class="toptext">筛选</div>
                    <div class="clear" @click="clearbaclform">
                        <img src="../../../assets/image/容器.png" alt="">
                        <span>清除</span>
                    </div>
                </div>
                <div class="formcontent">
                    <div class="formitem">
                        <div class="lable">客户名称：</div>
                        <el-input clearable @input="changecompanyname" v-model="companyname" style="width: 265px;"
                            placeholder="请输入客户名称" />
                        <div class="lable">成员：</div>
                        <el-select style="width:250px" clearable v-model="cy" @change="getreportinghandling" filterable placeholder="请选择成员">
                            <el-option v-for="(item, index) in cylist" :key="item.saleId" :label="item.saleName"
                                :value="item.saleId" />
                        </el-select>
                        <div class="lable">日期：</div>
                        <el-date-picker @change="changedate" clearable v-model="date" type="date" value-format="YYYY-MM-DD"
                            placeholder="请选择日期" />
                        <div class="lable">状态：</div>
                        <el-select style="width:250px" clearable @change="getreportinghandling" v-model="status" filterable placeholder="请选择">
                            <el-option key="0" label="待处理" value="0" />
                            <el-option key="1" label="处理中" value="1" />
                            <el-option key="2" label="已结案" value="2" />
                            <el-option key="3" label="已驳回" value="3" />
                            <el-option key="4" label="已撤销" value="4" />
                        </el-select>
                    </div>
                </div>
            </div>
            <div class="tablebox">
                <!-- <el-table :data="bacltabledate" style="width: 100%"  :header-cell-style="{ -->
                <el-table :data="data" @sort-change="sort_change" style="width: 100%"  :header-cell-style="{
                    background: '#FAFAFC',
                    color: '#202536',
                }">
                    <el-table-column prop="companyName" label="客户名称" />
                    <el-table-column prop="saleName" label="商务负责人" />
                    <el-table-column prop="deptName" label="所属分组" />
                    <el-table-column prop="insuranceType" label="产品">
                        <template #default="scope">
                            <div>
                                {{ scope.row.insuranceType === 2 ? '日日保' : '长期保' }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="outDangerUserName" label="出险人姓名" />
                    <el-table-column prop="outDangerDate" sortable label="出险时间" />
                    <el-table-column prop="reportStatus" label="状态">
                        <template #default="scope">
                            <div class="blue" v-show="scope.row.reportStatus === 0">待处理</div>
                            <div class="yellow" v-show="scope.row.reportStatus === 1">处理中</div>
                            <div class="green" v-show="scope.row.reportStatus === 2">已结案</div>
                            <div class="red" v-show="scope.row.reportStatus === 3">已驳回</div>
                            <div class="gray" v-show="scope.row.reportStatus === 4">已撤销</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="最新进展">
                        <template #default="scope">
                            <div v-if="scope.row.reportCaseResultList[0]">{{ scope.row.reportCaseResultList[0].remark }}
                            </div>
                            <div v-if="!scope.row.reportCaseResultList[0]">--</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template #default="scope">
                            <span style="margin-right:5px" class="pointer blue" @click="lookdetail(scope.row)">查看详情</span>
                        </template>
                    </el-table-column>
                </el-table>
                <pagination :total="bacltotal" :currentPage="baclpagenum" :pageSize="baclpagesize"
                    @SizeChange="changebaclpagesize" @CurrentChange="changebaclpagenum"></pagination>
            </div>
        </div>
        <!-- 查看详情弹窗 -->
        <el-drawer v-model="detailtc" :title="dialogTitle" direction="rtl" 
        :size="isMobile ? '100%' : '50%'">
            <div class="closeinnerdrawer" @click="hide">
                <span>收</span><span>起</span><img src="../../../assets/image/组355.png" alt="" />
            </div>
            <div class="detailbox">
                <div class="titlebox">基础信息</div>
                <div class="jcxxbox">
                    <div class="jcxxboxitem">
                        <div class="lable">出险人姓名</div>
                        <div class="lablecontent">{{ infomsg.outDangerUserName }}</div>
                    </div>
                    <div class="jcxxboxitem">
                        <div class="lable">出险人身份证号</div>
                        <div class="lablecontent">{{ infomsg.outDangerIdCardNo }}</div>
                    </div>
                </div>
                <div class="jcxxbox">
                    <div class="jcxxboxitem">
                        <div class="lable">出险人手机号</div>
                        <div class="lablecontent">{{ infomsg.outDangerPhone }}</div>
                    </div>
                    <div class="jcxxboxitem">
                        <div class="lable">报案人手机号</div>
                        <div class="lablecontent">{{ infomsg.reportPhone }}</div>
                    </div>
                </div>
                <div class="jcxxbox">
                    <div class="jcxxboxitem">
                        <div class="lable">出险时间</div>
                        <div class="lablecontent">{{ infomsg.outDangerDate }}</div>
                    </div>
                    <div class="jcxxboxitem">
                        <div class="lable">出险地点</div>
                        <div class="lablecontent">{{ infomsg.outDangerPlace }}</div>
                    </div>
                </div>
                <div class="jcxxbox">
                    <div class="jcxxboxitem">
                        <div class="lable">事故类型</div>
                        <div class="lablecontent">{{ infomsg.accidentType === 1 ? '意外' : '工傷' }}</div>
                    </div>
                    <div class="jcxxboxitem">
                        <div class="lable">严重伤情</div>
                        <div class="lablecontent">{{ infomsg.hurtStatus === 1 ? '是' : '不是' }}</div>
                    </div>
                </div>
                <div class="jcxxbox">
                    <div class="jcxxboxitem">
                        <div class="lable">录入时间</div>
                        <div class="lablecontent">{{ infomsg.createTime }}</div>
                    </div>
                    <div class="jcxxboxitem">
                        <div class="lable">报案材料</div>
                        <div class="lablecontent blue pointer" @click="lookdayvidio(infomsg.params.fileUrl)">员工出险视频</div>
                    </div>
                </div>
                <div class="jcxxbox">
                    <div class="jcxxboxitem">
                        <div class="lable">事故经过</div>
                        <div class="lablecontent">{{ infomsg.accidentDetails }}</div>
                    </div>
                </div>
                <div class="titlebox">赔款金额</div>
                <div class="jcxxbox">
                    <div class="jcxxboxitem">
                        <div class="lable">预计金额</div>
                        <div class="lablecontent">{{ infomsg.estimateMoney }}</div>
                    </div>
                    <div class="jcxxboxitem">
                        <div class="lable">最终金额</div>
                        <div class="lablecontent">{{ infomsg.finalMoney }}</div>
                    </div>
                </div>
                <div class="titlebox">投保信息</div>
                <div class="jcxxbox">
                    <div class="jcxxboxitem">
                        <div class="lable">投保方案</div>
                        <div class="lablecontent">{{ infomsg.companyPlanName }}</div>
                    </div>
                    <div class="jcxxboxitem">
                        <div class="lable">投保日期</div>
                        <div class="lablecontent">{{ infomsg.insurStartTime }}</div>
                    </div>
                </div>
                <div class="jcxxbox">
                    <div class="jcxxboxitem">
                        <div class="lable">劳务公司</div>
                        <div class="lablecontent">{{ infomsg.companyName }}</div>
                    </div>
                    <div class="jcxxboxitem">
                        <div class="lable">被派遣单位</div>
                        <div class="lablecontent">{{ infomsg.serveCompanyName }}</div>
                    </div>
                </div>
                <div class="jcxxbox">
                    <div class="jcxxboxitem">
                        <div class="lable">工种</div>
                        <div class="lablecontent">{{ infomsg.occupationName }}<span v-if="infomsg.occupationLevel">（{{
                            infomsg.occupationLevel }}）类</span>
                        </div>
                    </div>
                </div>
                <div class="jcxxbox">
                    <div class="jcxxboxitem">
                        <div class="lable">被派遣日期</div>
                        <div class="lablecontent">{{ infomsg.insurStartTime }}</div>
                    </div>
                </div>
                <div class="titlebox">案件进展</div>
                <div style="padding-left: 16px;">
                    <div class="info-container">
                        <div v-show="dataline.length === 0"
                            style="text-align: center; width: 100%; height: 100px; line-height: 100px">
                            暂无数据
                        </div>
                        <div class="item" v-for="(item, index) in dataline" :key="index" v-show="dataline.length != 0">
                            <div :class="{ point: true, activelinec: index === 0 }"></div>
                            <div class="line" v-if="index + 1 != dataline.length"></div>
                            <div class="info-right">
                                <div class="top">
                                    <span :class="{ activeline: index === 0 }">{{ item.reportRemark }}</span> <span>{{
                                        item.createTime }}</span>
                                </div>
                                <div class="bottom">{{ item.remark }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </el-drawer>
        <!-- 查看视频弹窗 -->
        <el-dialog v-model="diavideoVisible" :width="isMobile ? '960' : '50%'" title="" top="10vh">
            <h3 class="flexcenterbox">{{ atpresent + 1 }}/{{ videolist.length }}</h3>
            <div class="videobox">
                <div class="lbtn">
                    <img @click="prev" src="../../../assets/image/lbtn.png" alt="">
                </div>
                <div v-show="atpresent === index" class="video" style="height: 600px;" v-for="(ele, index) in videolist"
                    :key="index">
                    <video crossorigin="anonymous" style="height: 600px;width: 100%;" :src="ele.fileUrl" autoplay loop controls></video>
                </div>
                <div class="rbtn">
                    <img @click="next" src="../../../assets/image/rbtn.png" alt="">
                </div>
            </div>
        </el-dialog>
    </div>
</template>
<script lang="ts" setup>
import crumbs from '../../../components/crumbs.vue'
import { ref, reactive, computed, watch, onMounted, onActivated } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getreportinghandlingapi, getreportdetailsapi } from '../../../api/microAlerts'
import { getallsellerapi } from '../../../api/api'
import { shake } from '../../../utils/utils'
const router = useRouter()
const route = useRoute()
const isMobile = ref((window as any).isMobile)

const sort_change = (val: any) => {
    sortfile.value = val.prop
    sorttype.value = val.order
    console.log(sortfile.value, sorttype.value)
    getreportinghandling()
}
const lookdayvidio = (url: any) => {
    console.log(url)
    diavideoVisible.value = true
    videolist.value = url
}
const diavideoVisible = ref(false)
const atpresent = ref(0)
const prev = () => {
    console.log(1)
    if (atpresent.value <= 0) {
        return
    }
    else {
        atpresent.value = atpresent.value - 1
    }
}
const next = () => {
    console.log(2)
    if (atpresent.value >= videolist.value.length - 1) {
        return
    }
    else {
        atpresent.value = atpresent.value + 1
    }
}
const videolist = ref([])
const getallseller = () => {
    getallsellerapi().then((res: any) => {
        console.log(res, '成员列表')
        cylist.value = res
    })
}
const changedate = (val: any) => {
    console.log(val)
    console.log(date.value)
    getreportinghandling()
}
const sortfile = ref('')
const sorttype = ref('')
const getreportinghandling = () => {
    getreportinghandlingapi({
        companyName: companyname.value,
        startTime: date.value === null ? '' : date.value,
        endTime: date.value === null ? '' : date.value,
        reportStatus: status.value,
        pageSize: baclpagesize.value,
        pageNum: baclpagenum.value,
        salesId: cy.value,
        sortField: sortfile.value === null ? '' : sortfile.value.replace('ending', ''),
        sortType: sorttype.value === null ? '' : sorttype.value.replace('ending', '')
    }).then((res: any) => {
        console.log(res)
        bacltotal.value = res.totalCount
        data.value = res.list
    })
}
// onMounted(() => {
//     getallseller()
//     getreportinghandling()
// })
onActivated(() => {
    getallseller()
    getreportinghandling()
})
const data = ref<any>([])
const dialogTitle = ref('')
const lookdetail = (val: any) => {
    console.log(val, 'djhbhjd')
    dialogTitle.value = val.companyName
    console.log(val, '详情')
    getreportdetailsapi({
        id: val.id,
        insuranceType: val.insuranceType
    }).then((res: any) => {
        console.log(res, '详情')
        infomsg = res
        dataline.value = res.reportCaseResultList
    })
    detailtc.value = true
}
const dataline = ref<any>([])
let infomsg = reactive<any>({})
const hide = () => {
    detailtc.value = false
}
const detailtc = ref(false)
const bacltabledate = ref<any>([])
const bacltotal = ref(0)
const baclpagesize = ref(10)
const baclpagenum = ref(1)
const changebaclpagesize = (val: any) => {
    baclpagesize.value = val
    baclpagenum.value = 1
    getreportinghandling()
}
const changebaclpagenum = (val: any) => {
    baclpagenum.value = val
    getreportinghandling()
}
const status = ref('')
const date = ref('')
const cylist = ref<any>([])
const cy = ref('')
const companyname = ref('')
const changecompanyname = (val: any) => {
    shake(getreportinghandling, 400)
}
const clearbaclform = () => {
    companyname.value = ''
    status.value = ''
    date.value = ''
    cy.value = ''
    getreportinghandling()
}
const back = () => {
    window.history.back()
}
</script>



<style lang="scss" scoped>
.detailbox {
    margin-top: -20px;
    padding-top: 16px;
    width: 100%;
    box-sizing: border-box;
    border-top: 1px solid #F4F4F7;
    font-size: 14px;

    .jcxxbox {
        box-sizing: border-box;
        padding-left: 16px;
        display: flex;

        .jcxxboxitem {
            display: flex;
            flex: 1;
            flex-shrink: 0;
            margin-bottom: 16px;

            .lable {
                width: 100px;
                color: #9497B1;
                margin-right: 24px;
            }

            .lablecontent {
                color: #202536;
            }
        }
    }

    .titlebox {
        border-left: 4px solid #0256FF;
        padding-left: 8px;
        font-size: 14px;
        color: #3D3D3D;
        margin-bottom: 24px;
    }
}

.tablebox {
    margin-top: 16px;
    background-color: #ffffff;
    padding: 16px;
}

.paddingbox {
    width: 100%;
    box-sizing: border-box;
    padding: 16px;
}

.formbox {
    background-color: #ffffff;
    border-top-right-radius: 8px;
    width: 100%;
    box-sizing: border-box;
    padding: 0 8px;
    border-radius: 8px;

    .formcontent {
        padding: 0 24px 16px;
        width: 100%;
        box-sizing: border-box;

        .formitem {
            margin-top: 16px;
            margin-right: 50px;
            display: flex;
            align-items: center;

            .formitemflexone {
                display: flex;
                align-items: center;
                flex: 1;
            }

            .lable {
                min-width: 70px;
                font-size: 14px;
                color: #202536;
                margin-right: 8px;
                text-align: right;
            }
        }
    }

    .top {
        width: 100%;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        padding: 16px 8px;
        align-items: center;
        border-bottom: 1px solid #F4F4F7;

        .toptext {
            color: #3D3D3D;
            font-size: 14px;
        }

        .utils {
            display: flex;
            align-items: center;
        }

        .clear {
            cursor: pointer;
            margin-right: 20px;
            margin-left: 24px;
            color: #9497B1;
            font-size: 14px;

            img {
                width: 16px;
                height: 16px;
                margin-right: 6px;
                margin-bottom: -3px;
            }
        }
    }
}

.closeinnerdrawer {
    cursor: pointer;
    position: fixed;
    top: 50px;
    right: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 59px;
    background-color: #0256ff;
    font-size: 14px;
    color: #ffffff;

    img {
        margin-top: 5px;
    }
}

.info-container {
    .item {
        font-size: 13px;
        color: #666;
        display: flex;
        align-content: center;
        position: relative;
        height: 80px;

        .item-time {
            margin-top: 5px;
            width: 78px;
            text-align: center;
            position: relative;
            height: 80px;
            margin-right: 10px;

            .item-time {
                margin-top: 0px;
                width: 78px;
                text-align: center;
                line-height: 20px;
                color: #000;
            }
        }

        .point {
            width: 12px;
            height: 12px;
            margin-top: 14px;
            background: #ffffff;
            border-radius: 50%;
            border: 2px solid #0256FF;
        }

        .line {
            position: absolute;
            left: 7px;
            top: 29px;
            width: 2px;
            height: 70px;
            background: #ccc;
        }

        .tag {
            margin-left: 10px;
            margin-top: 10px;
        }

        .info-right {
            margin-left: 10px;

            .top {
                color: #000000;
                font-weight: bold;

                span:nth-child(2) {
                    margin: 0 6px;
                }

                span:nth-child(3) {
                    margin-left: 6px;
                }
            }

            .bottom {
                width: 450px;
                // background-color: red;
                height: 50px;
                text-overflow: ellipsis;
                box-sizing: border-box;
                padding: 10px;
                overflow: hidden;
                color: rgba(61, 61, 61, 1);
                font-size: 14px;
            }
        }
    }
}

.pointer {
    cursor: pointer;
}

.blue {
    color: #3E5FF5 !important;
}

.yellow {
    color: #FFA814;
}

.green {
    color: #00D679;
}

.red {
    color: #E05F42;
}

.gray {
    color: #9497B1;
}

.activeline {
    font-weight: 700;
}

.activelinec {
    background-color: #0256FF !important;
}

.videobox {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    position: relative;

    .lbtn {
        z-index: 999;
        position: absolute;
        top: 250px;
        left: 0;
    }

    .rbtn {
        z-index: 999;
        position: absolute;
        top: 250px;
        right: 0;
    }

    .video {
        flex: 1;
        width: 100%;
    }
}
</style>